---
title: Color Pickers
description: Examples of combining the Primitives to create a full color picker
component: true
links:
  doc: https://react-spectrum.adobe.com/react-aria/ColorPicker.html
---

The following are examples of how you can combine the [Primitives](./color-primitives) to create a full color picker.

<ComponentPreview name="color-picker-hex" />

## Installation

<Tabs defaultValue="cli">

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Copy & Paste</TabsTrigger>
</TabsList>
<TabsContent value="cli">

<PackageManagerTabs>
  <PackageManagerContent value="npm">
    ```bash
    npx shadcn@latest add https://jollyui.dev/[[STYLE]]/color
    ```
  </PackageManagerContent>
  <PackageManagerContent value="pnpm">
    ```bash
    pnpm dlx shadcn@latest add https://jollyui.dev/[[STYLE]]/color
    ```

  </PackageManagerContent>
  <PackageManagerContent value="bun">
    ```bash
    bunx --bun shadcn@latest add https://jollyui.dev/[[STYLE]]/color
    ```
  </PackageManagerContent>
  <PackageManagerContent value="yarn">
    ```bash 
    npx shadcn@latest add https://jollyui.dev/[[STYLE]]/color
    ```
  </PackageManagerContent>
</PackageManagerTabs>

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="color" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</Tabs>

## Color Pickers

### Combined

<ComponentPreview name="color-picker-hex" />

### Multiple Color Spaces

<ComponentPreview name="color-picker-multi" />

### Sliders

<ComponentPreview name="color-picker-slider" />

### Eye Dropper

You can make an eyedropper component by using a [Button](./button) and react-aria context. Check browser support [here](https://caniuse.com/?search=EyeDropper).

For example:

```tsx
function EyeDropperButton() {
  let state = React.useContext(ColorPickerStateContext)!

  // Check browser support. ()
  // @ts-expect-error
  if (typeof EyeDropper === "undefined") {
    return null
  }

  return (
    <Button
      aria-label="Eye dropper"
      size="icon"
      variant="outline"
      onPress={() => {
        // @ts-expect-error
        new EyeDropper()
          .open()
          .then((result: { sRGBHex: string }) =>
            state.setColor(parseColor(result.sRGBHex))
          )
      }}
    >
      <Pipette />
    </Button>
  )
}
```

<ComponentPreview name="color-picker-eye" />

## Color Spaces

### Hex

<ComponentPreview name="color-picker-hex" />

### Hex + Alpha

<ComponentPreview name="color-picker-hexa" />

### HSB

<ComponentPreview name="color-picker-hsb" />

### HSBA

<ComponentPreview name="color-picker-hsba" />

### HSL

<ComponentPreview name="color-picker-hsl" />

### HSLA

<ComponentPreview name="color-picker-hsla" />

### RGB

<ComponentPreview name="color-picker-rgb" />

### RGBA

<ComponentPreview name="color-picker-rgba" />
